<!-- <template>
  <div class="post-detail-page">
    <article class="w-75 mx-auto mb-5 pb-3" v-if="currentPost">
      <img
        :src="currentImageUrl"
        :alt="currentPost.title"
        class="rounded-lg img-fluid my-4"
        v-if="currentImageUrl"
      />
      <h2 class="mb-4">{{ currentPost.title }}</h2>
      <div
        class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0"
      >
        <div class="col">
          <user-profile
            :user="currentPost.author"
            v-if="typeof currentPost.author === 'object'"
          ></user-profile>
        </div>
        <span class="text-muted col text-right font-italic"
          >发表于：{{ currentPost.createdAt }}</span
        >
      </div>
      <div v-html="currentHTML"></div>
    </article>
  </div>
</template> -->
<template>
  <div class="post-detail-page">
    <article class="w-75 mx-auto mb-5 pb-3">
      <img
        :src="currentImageUrl"
        :alt="postData.title"
        class="rounded-lg img-fluid my-4"
        v-if="currentImageUrl"
      />
      <h2 class="mb-4">{{ postData.title }}</h2>
      <div
        class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0"
      >
        <div class="col">
          <user-profile
            :user="postData.author"
            v-if="typeof postData.author === 'object'"
          ></user-profile>
        </div>
        <span class="text-muted col text-right font-italic"
          >发表于：{{ postData.createdAt }}</span
        >
      </div>
      <div v-html="currentHTML"></div>
    </article>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import MarkdownIt from "markdown-it";
import { ImageProps, PostProps } from "@/store";
import UserProfile from "@/components/UserProfile.vue";

const md = new MarkdownIt();
const store = useStore();
const route = useRoute();
const currentId = route.params.id;
const postData = ref({});

const currentImageUrl = computed(() => {
  if (postData.value && postData.value.image) {
    const { image } = postData.value;
    return (image as ImageProps).url + "?x-oss-process=image/resize,w_850";
  } else {
    return null;
  }
});

store.dispatch("fetchPost", currentId).then((res) => {
  postData.value = res;
});
// onMounted(() => {});

const currentHTML = computed(() => {
  const { content, isHTML } = postData.value;
  if (postData.value && content) {
    return isHTML ? content : md.render(content);
  } else {
    return content;
  }
});
</script>
<style lang="scss"></style>
